<template>
    <view class="conmmission">
        <view class="commission-head">
            <van-icon class="back-left" name="arrow-left" @click="toBack" />
            <view class="commission-title">我的佣金</view>
        </view>
        <view class="commission-content">
            <view class="commission-content-box">
                <view class="commission-content">
                    <view class="commission-content-title">我的佣金</view>
                    <view class="commission-content-num"> {{ dataList.commission_data.commission_amount || 0.00 }}
                        <span>元</span>
                    </view>
                    <view class="commission-content-text" @tap="show = true">提现到微信 <van-icon class="icon"
                            name="arrow" /></view>
                </view>
            </view>
            <view class="commission-content-line">
                <view class="commission-content-line-flex">
                    <view class="commission-content-line-flex-num" style="color: #FF6200;">￥{{
                        dataList.commission_data.commission_total || 0.00 }}</view>
                    <view class="commission-content-line-flex-text">累计佣金</view>
                </view>
                <view class="commission-content-line-flex">
                    <view class="commission-content-line-flex-num">{{ dataList.commission_data.dist_user_num || 0 }}
                    </view>
                    <view class="commission-content-line-flex-text">直推成员</view>
                </view>
                <view class="commission-content-line-flex">
                    <view>￥{{ dataList.commission_data.buy_amount || 0.00 }}</view>
                    <view class="commission-content-line-flex-text">成员累计购买金额</view>
                </view>
            </view>
        </view>
        <view class="commission-content-list" v-if="dataList.list">
            <view class="commission-content-item" v-for="item in dataList.list" :key="item">
                <view class="commission-content-item-flex">
                    <view class="commission-content-item-flex-left">{{ item.audit_status_text }}</view>
                    <view class="commission-content-item-flex-right">{{ item.with_amount }}</view>
                </view>
                <view class="commission-content-item-tims">{{ item.createtime }}</view>
            </view>
        </view>
        <view style="height: 60rpx;"></view>
        <view class="dialog" v-if="show" @click.stop="onClickHide">
            <view class="dialog-content" @click.stop>
                <view class="dialog-content-flex">
                    <view class="dialog-content-flex-left">到账方式</view>
                    <view class="dialog-content-flex-right">
                        <text>中国建设银行(4567)</text>
                        <van-icon name="arrow" />
                    </view>
                </view>
                <view class="dialog-content-num">
                    <view class="dialog-content-num-title">提现金额</view>
                    <view class="dialog-content-num-flex">
                        <view class="dialog-content-num-left">
                            <view class="input">¥</view>
                            <input v-model="num" placeholder="输入金额" type="number"
                                :max="dataList.commission_data.commission_total || 0"
                                placeholder-class="input-placeholder" @input="" />
                        </view>
                        <view class="dialog-content-num-right" @click="withd(0)">全部提现</view>
                    </view>
                    <view class="dialog-content-num-text">当前可提现金额{{ dataList.commission_data.commission_total || 0.00 }}
                        元</view>
                </view>
                <view class="dialog-content-btn" @click="withd(1)">立即提现</view>
            </view>
        </view>
    </view>
</template>

<script>
import { getWithdrawList, withdrawApply } from "@/api/api"
export default {
    data() {
        return {
            show: false,
            dataList: {},
			num:""
        }
    },
    onLoad(options) {
        this.withdraw()
    },
    methods: {
        withdraw() {
            getWithdrawList({
                page: 1,
                limit: 50
            }).then(res => {
                if (res.code == 1) {
                    this.dataList = res.data
					console.log(this.dataList)
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        },
        toBack() {
            uni.navigateBack()
        },
        onClickHide() {
            this.show = false
        },
        withd(type) {
			console.log(this.num)
			if(type==1){
				if(this.num){
					withdrawApply({
						with_amount: this.num
					}).then(res=>{
						console.log(res)
						uni.showToast({
						    title: res.msg,
						    icon: 'none'
						})
						this.show = false
					})
				}else{
					uni.showToast({
					    title: "请输入提现金额",
					    icon: 'none'
					})
				}
				
			}else{
				this.num = this.dataList.commission_data.commission_amount
				withdrawApply({
					with_amount: this.dataList.commission_data.commission_amount
				}).then(res=>{
					console.log(res)
					uni.showToast({
					    title: res.msg,
					    icon: 'none'
					})
					this.show = false
				})
			}
        }
    }
}
</script>

<style scoped lang="scss">
.conmmission {
    width: 100%;
    background: linear-gradient(180deg, #FF6200 0%, rgba(255, 98, 0, 0) 100%);
    position: relative;
    height: 800upx;

    .commission-head {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 110upx;
        position: relative;

        .back-left {
            color: #fff;
            font-size: 40upx;
            position: absolute;
            left: 40upx;
        }
    }

    .commission-title {
        font-size: 30upx;
        color: #fff;
        text-align: center;
        font-weight: normal;
        flex: 1;

    }

    .commission-content {
        border-radius: 23upx;
        background-color: #fff;
        padding: 30upx 20upx;
        margin-top: 100rpx;
        margin: 50upx 30upx 0 30upx;

    }

    .commission-content-box {
        position: relative;
        display: flex;
        justify-content: center;

        .commission-content {
            padding-top: 60upx;

            .commission-content-title {
                color: #A2A2A2;
                font-size: 30upx;
                margin-bottom: 15upx;
                text-align: center;
            }

            .commission-content-num {
                color: #FF6200;
                font-size: 80upx;
                text-align: center;
                font-weight: bold;
                position: relative;

                span {
                    position: absolute;
                    top: 50upx;
                    font-weight: normal;
                    font-size: 30upx;
                    margin-left: 15upx;
                }
            }

            .commission-content-text {
                color: #359BEF;
                font-size: 30upx;
                text-align: center;
                margin-top: 10upx;
                margin-left: 44upx;

                .icon {
                    color: #359BEF;
                    margin-left: 10upx;
                    font-size: 30upx;
                }
            }
        }


    }
}

.commission-content-line {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20upx 10upx;

    .commission-content-line-flex {
        // width: 100upx;
        text-align: center;

        .commission-content-line-flex-num {
            font-size: 32upx;
            color: #333333;
            font-weight: normal;
        }

        .commission-content-line-flex-text {
            font-size: 26upx;
            color: #5C5C5C;
            font-weight: normal;
            margin-top: 10upx;
        }

    }
}

.commission-content-list {
    background: #FFFFFF;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16upx;
    margin: 30upx;
    padding: 20rpx 40rpx;


    .commission-content-item {
        padding: 10rpx 0;
        border-bottom: 1px solid #EDEDED;

        .commission-content-item-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10rpx;

            .commission-content-item-flex-left {
                color: #333333;
                font-size: 30upx;
                text-align: left;
            }

            .commission-content-item-flex-right {
                color: #FF6200;
                font-size: 30rpx;
                text-align: right;
            }
        }



        .commission-content-item-tims {
            font-size: 24upx;
            color: #8C8C8C;
            text-align: left;
        }
    }

    .commission-content-item:last-child {
        border: 0;
    }
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-content {
        background-color: #fff;
        width: 600upx;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
        border-radius: 16upx;
        padding: 30upx 40upx;
    }

    .dialog-content-flex {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #EDEDED;
        align-items: center;
        padding-bottom: 30upx;

        .dialog-content-flex-left {
            color: #3D3D3D;
            font-size: 28upx;
        }

        .dialog-content-flex-right {
            color: #3D3D3D;

            text {
                font-size: 28upx;
                margin-right: 10upx;
            }
        }
    }

    .dialog-content-num {
        padding: 30upx 0;

        .dialog-content-num-title {
            color: #3D3D3D;
            font-size: 28upx;
        }

        .dialog-content-num-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20upx 0;
            border-bottom: 1px solid #EDEDED;
        }

        .dialog-content-num-right {
            color: #FF6200;
            font-size: 26upx;
        }

        .dialog-content-num-left {
            display: flex;

            .input {
                font-size: 40upx;
                color: #000;
                margin-right: 20upx;

            }

            .input-placeholder {
                font-size: 40upx;
                color: #000;

            }

            input {
                font-size: 50upx;
                width: 400upx;
            }
        }
    }

    .dialog-content-num-text {
        font-size: 22upx;
        color: #767676;
        margin-top: 30upx;
    }

    .dialog-content-btn {
        width: 100%;
        height: 78upx;
        margin: 30upx auto 0;
        background-color: #FF6200;
        border-radius: 8upx;
        color: #fff;
        text-align: center;
        line-height: 78upx;
        font-size: 28upx;
    }
}
</style>